<template>
  <div class="setting">
    <el-card>
      <el-tabs v-model="active">
        <el-tab-pane label="用户管理" name="first">
          <el-button
            type="primary"
            style="margin: 20px"
            @click="operatePup = true"
          >
            新增角色
          </el-button>
          <el-table :data="roleList" style="width: 100%">
            <el-table-column
              type="index"
              align="center"
              label="序号"
              width="200"
            />
            <el-table-column
              prop="name"
              align="center"
              label="角色"
              width="200"
            />
            <el-table-column
              prop="description"
              align="center"
              label="描述"
              width="280"
            />
            <el-table-column prop="address" align="center" label="操作">
              <template v-slot="{ row }">
                <el-button size="small" type="success" @click="assign(row)">
                  分配权限
                </el-button>
                <el-button size="small" type="primary" @click="edit(row)">
                  编辑
                </el-button>
                <el-button size="small" type="danger" @click="del(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-row type="flex" justify="center" style="margin: 30px">
            <el-col :span="6">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="7"
              />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">
          <ComponyInfo />
        </el-tab-pane>
      </el-tabs>

      <!-- 新增角色弹层 -->
      <OperateRolePup
        :operate-pup="operatePup"
        @addRole="addRole"
        @close="operatePup = false"
      />

      <!-- 编辑角色弹层 -->
      <EditRole
        ref="edit"
        :operate-pup="editRole"
        @editRoles="editRoles"
        @close="editRole = false"
      />

      <!-- 分配权限 -->
      <AssignPerm
        v-if="assignPerm"
        :id="currentId"
        ref="assign"
        :assign-perm="assignPerm"
        @close="assignPerm = false"
      />
    </el-card>
  </div>
</template>

<script>
import AssignPerm from './components/asign-perm.vue'
import ComponyInfo from './components/compony.vue'
import EditRole from './components/edit-role.vue'
import OperateRolePup from './components/operate-pup.vue'
import { getAllRole, delRole } from '@/api/setting'
export default {
  name: 'SettingIndex',
  components: {
    OperateRolePup,
    EditRole,
    ComponyInfo,
    AssignPerm
  },
  data() {
    return {
      active: 'first',
      roleList: [],
      page: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      operatePup: false,
      editRole: false,
      assignPerm: false,
      currentId: ''
    }
  },
  created() {
    this.getAllRole()
  },
  methods: {
    async getAllRole() {
      const res = await getAllRole(this.page)
      this.total = res.total
      this.roleList = res.rows
    },
    //  新增角色
    addRole() {
      this.operatePup = false
      this.getAllRole()
    },
    // 编辑角色
    editRoles() {
      this.editRole = false
      this.getAllRole()
    },
    // 编辑按钮点击
    edit(row) {
      this.editRole = true
      this.$nextTick(() => {
        this.$refs.edit.getRoleDetail(row.id)
      })
    },
    // 删除角色
    async del(row) {
      await delRole(row.id)
      this.$message('删除角色成功')
      this.getAllRole()
    },
    assign(row) {
      this.assignPerm = true
      this.currentId = row.id
      this.$nextTick(() => {
        this.$refs.assign.getRoleDetail(row.id)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.setting {
  font-size: 16px;
}
</style>
